<template>
  <div class="dice-roller">
    <div class="dice-container" @click="rollDice" :class="{ 'rolling': isRolling }">
      <img v-if="!isRolling" :src="`/images/dice-${diceValue}.svg`" alt="骰子" class="dice-image" />
      <div v-else class="dice-placeholder">
        <span>?</span>
      </div>
    </div>
    <div class="dice-text">{{ buttonText }}</div>
  </div>
</template>

<script>
export default {
  name: 'DiceRoller',
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      diceValue: 6,
      isRolling: false,
      buttonText: '点击骰子开始游戏'
    };
  },
  methods: {
    rollDice() {
      if (this.isRolling || this.disabled) return;
      
      this.isRolling = true;
      this.buttonText = '骰子正在转动...';
      
      // 模拟骰子滚动
      const rollInterval = setInterval(() => {
        this.diceValue = Math.floor(Math.random() * 6) + 1;
      }, 100);
      
      // 1秒后停止滚动
      setTimeout(() => {
        clearInterval(rollInterval);
        this.isRolling = false;
        this.buttonText = '点击骰子继续游戏';
        
        // 发出事件，通知父组件骰子的值
        this.$emit('rolled', this.diceValue);
      }, 1000);
    }
  }
};
</script>

<style scoped>
.dice-roller {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px 0;
}

.dice-container {
  width: 80px;
  height: 80px;
  background-color: white;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  margin-bottom: 10px;
  border: 3px solid #ff5722;
  overflow: hidden;
}

.dice-container:hover {
  transform: scale(1.05);
  transition: transform 0.2s;
}

.dice-container.rolling {
  animation: shake 0.5s infinite;
}

.dice-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dice-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #ff5722;
  font-weight: bold;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(0deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.dice-text {
  font-size: 14px;
  color: #666;
  text-align: center;
}
</style>